<template>
  <div>
    <m-table
      :options="options"
      border
      :data="tableData"
      :isEditRow="true"
      v-model:editRowIndex="editRowIndex"
      @cellSubmit="onCellSubmit"
      v-model:currentPage="current"
      v-model:pageSize="pageSize"
      :total="total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
      <template #name="{ scope }">
        <el-tag>{{ scope.row.name }}</el-tag>
      </template>
      <template #editRow="{ scope }">
        <el-button link type="primary" size="small" @click="save(scope)"
          >完成</el-button
        >
        <!-- <el-button link type="primary"   size="small" @click="onEdit(scope)"
          >取消</el-button
        > -->
      </template>
      <template #action="{ scope }">
        <el-button link type="primary" size="small" @click="onEdit(scope)"
          >Edit</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="handleClick(scope.row)"
        >
          Detail
        </el-button>
      </template>
    </m-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import axios from "axios";
import { TableOptions } from "@/components/table/src/types.ts";

const options: TableOptions[] = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    slot: "name",
    prop: "name",
    editable: true,
  },
  {
    label: "地址",
    prop: "address",
    editable: true,
  },
  {
    label: "操作",
    action: true,
  },
];
interface User {
  date: string;
  name: string;
  address: string;
}

let tableData = ref<User[]>([
  {
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
  },
  {
    date: "2016-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
  },
  {
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
  },
]);

let current = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);
onMounted(() => {
  handleQuery();
});
function handleQuery() {
  axios
    .post("/api/list", { current: current.value, pageSize: pageSize.value })
    .then((res: any) => {
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total;
    });
}

// setTimeout(() => {
//   tableData.value = [
//     {
//       date: "2016-05-04",
//       name: "Aleyna Kutzner",
//       address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
//     },
//     {
//       date: "2016-05-03",
//       name: "Helen Jacobi",
//       address: "760 A Street, South Frankfield, Illinois",
//     },
//     {
//       date: "2016-05-02",
//       name: "Brandon Deckert",
//       address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
//     },
//     {
//       date: "2016-05-01",
//       name: "Margie Smith",
//       address: "23618 Windsor Drive, West Ricardoview, Idaho",
//     },
//   ];
// }, 2000);

function handleClick(row: User) {
  console.log(row);
}

function onCellSubmit(scope: any) {
  console.log(scope);
}

// 整行编辑
let editRowIndex = ref<string>("");

function onEdit(scope) {
  editRowIndex.value = "edit";
}

function save(scope) {
  console.log(scope);
  // editRowIndex.value = "";
}
//分頁
function handleSizeChange(val: number) {
  pageSize.value = val;
  handleQuery();
}
function handleCurrentChange(val: number) {
  current.value = val;
  handleQuery();
}
</script>

<style scoped></style>
